<template>
  <div>
    <van-grid :border="false" :column-num="2" square icon-size="40px">
      <van-grid-item icon="good-job-o" text="中式婚服" @click="chcekZs" />
      <van-grid-item icon="gem-o" text="西式婚服" @click="chcekXs" />
    </van-grid>
    <van-grid :border="false" :column-num="2" square icon="photo-o">
      <van-grid-item icon="service-o" text="婚纱订制" @click="chcekHs" />
      <van-grid-item icon="video-o" text="造型摄影" @click="chcekZx" />
    </van-grid>
  </div>
</template>

<script>
export default {
  methods: {
    chcekZs() {
      this.$router.push("/chinese");
    },
    chcekXs() {
      this.$router.push("/western");
    },
    chcekHs() {
      this.$router.push("/personality");
    },
    chcekZx() {
      this.$router.push("/syzs");
    },
  },
};
</script>

<style  scoped>
::v-deep .van-grid-item__content {
  color: white;
  background-color: #000000;
}
::v-deep .van-grid-item__text {
  color: white;
  font-size: 20px;
}
::v-deep .van-icon-like-o:before {
  color: white;
}
::v-deep .van-icon-location-o:before {
  color: white;
}
::v-deep .van-icon-manager-o:before {
  color: white;
}
</style>